<template>
	<view :class="['search',sticky ? 'sticky-search' : '']" @click="onSearchBarClicked">
		<uni-search-bar radius="18" :placeholder="placeholder" :cancelButton="none"
			@input="onInputChanged"
			@confirm="onSearchBarConfirm"
			>
		</uni-search-bar>
	</view>
</template>

<script>
	export default {
		name: "SearchBar",
		props: {
			placeholder: {
				type: String,
				default: ''
			},
			cancelButton: {
				type: String,
				default: 'none'
			},
			sticky: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			onInputChanged(e) {
				this.$emit('onInputChanged', e)
			},
			onSearchBarClicked() {
				this.$emit('onSearchBarClicked')
			},
			onSearchBarConfirm(e) {
				this.$emit('onSearchBarConfirm',e)
			}
		}
	}
</script>

<style>
	.sticky-search {
		position: sticky;
		top: 0;
		z-index: 9999;
	}
</style>
